
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <title>全球客籍人口分布可视化平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
    <style>
        .map-container { height: 60vh; width: 100%; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .population-badge { position: absolute; top: 10px; right: 10px; z-index: 1000; }
        .legend { background: white; padding: 10px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); }
        /* 解决微信浏览器中地图控件样式问题 */
        .leaflet-control-zoom { border: 1px solid #ccc !important; }
        .leaflet-control-zoom-in, .leaflet-control-zoom-out { background-color: white !important; color: #333 !important; }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 头部导航 -->
    <header class="bg-gradient-to-r from-amber-600 to-orange-700 text-white shadow-md">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-3xl md:text-4xl font-bold flex items-center">
                <i class="fa fa-globe mr-3"></i>全球客籍人口分布可视化
            </h1>
            <p class="mt-2 text-amber-100">基于多源数据的客籍人口地理分布与文化特征分析</p>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-amber-500">
                <h3 class="text-lg font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-users mr-2 text-amber-500"></i>全球客籍总人口
                </h3>
                <p class="text-3xl font-bold mt-2 text-amber-600">8000万 - 1亿</p>
                <p class="text-sm text-gray-500 mt-1">包含中国境内及海外多代移民后裔</p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
                <h3 class="text-lg font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-map-marker mr-2 text-red-500"></i>中国境内客籍
                </h3>
                <p class="text-3xl font-bold mt-2 text-red-600">5500万 - 8000万</p>
                <p class="text-sm text-gray-500 mt-1">主要分布于粤赣闽三省交界核心区</p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
                <h3 class="text-lg font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-plane mr-2 text-blue-500"></i>海外客籍人口
                </h3>
                <p class="text-3xl font-bold mt-2 text-blue-600">4000万 - 5000万</p>
                <p class="text-sm text-gray-500 mt-1">东南亚占比超70%，为核心分布区</p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
                <h3 class="text-lg font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-language mr-2 text-green-500"></i>主要方言区
                </h3>
                <p class="text-3xl font-bold mt-2 text-green-600">10+ 大分支</p>
                <p class="text-sm text-gray-500 mt-1">含梅县话、四县腔、海陆腔等</p>
            </div>
        </div>

        <!-- 选项卡导航 -->
        <div class="border-b border-gray-200 mb-6">
            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="tabGroup" role="tablist">
                <li class="mr-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 border-amber-500 text-amber-600 rounded-t-lg hover:text-amber-700" id="global-tab" data-tabs-target="#global" type="button" role="tab" aria-selected="true">
                        <i class="fa fa-globe mr-1"></i>全球分布
                    </button>
                </li>
                <li class="mr-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 rounded-t-lg" id="china-tab" data-tabs-target="#china" type="button" role="tab" aria-selected="false">
                        <i class="fa fa-flag mr-1"></i>中国境内分布
                    </button>
                </li>
                <li class="mr-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 rounded-t-lg" id="asia-tab" data-tabs-target="#asia" type="button" role="tab" aria-selected="false">
                        <i class="fa fa-map mr-1"></i>亚洲海外分布
                    </button>
                </li>
                <li role="presentation">
                    <button class="inline-block p-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 rounded-t-lg" id="stats-tab" data-tabs-target="#stats" type="button" role="tab" aria-selected="false">
                        <i class="fa fa-bar-chart mr-1"></i>数据统计
                    </button>
                </li>
            </ul>
        </div>

        <!-- 全球分布选项卡 -->
        <div id="global" class="tab-content active" role="tabpanel">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 全球地图 -->
                <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">全球客籍人口分布地图</h2>
                    <div id="globalMap" class="map-container"></div>
                    <div class="mt-4 text-sm text-gray-600">
                        <p><i class="fa fa-circle text-red-500 mr-1"></i> 核心分布区（100万+） | 
                        <i class="fa fa-circle text-orange-500 mr-1"></i> 主要分布区（10万-100万） | 
                        <i class="fa fa-circle text-yellow-500 mr-1"></i> 次要分布区（1万-10万） | 
                        <i class="fa fa-circle text-gray-400 mr-1"></i> 零星分布区（1万以下）</p>
                    </div>
                </div>

                <!-- 全球分布数据 -->
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">全球区域分布统计</h2>
                    <canvas id="globalPieChart" height="250"></canvas>
                    <div class="mt-6">
                        <h3 class="font-semibold text-gray-700 mb-2">区域分布特点</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><i class="fa fa-check-circle text-amber-500 mr-2"></i><strong>东南亚</strong>：占海外客籍70%+，印尼、马来西亚为核心</li>
                            <li><i class="fa fa-check-circle text-amber-500 mr-2"></i><strong>美洲</strong>：美国、秘鲁为主要聚居国，多为契约华工后裔</li>
                            <li><i class="fa fa-check-circle text-amber-500 mr-2"></i><strong>欧洲</strong>：英国、法国为主，含殖民回流及新移民</li>
                            <li><i class="fa fa-check-circle text-amber-500 mr-2"></i><strong>非洲</strong>：毛里求斯占比最高，达该国华人90%+</li>
                            <li><i class="fa fa-check-circle text-amber-500 mr-2"></i><strong>大洋洲</strong>：澳大利亚、新西兰为主，含淘金热移民后裔</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中国境内分布选项卡 -->
        <div id="china" class="tab-content" role="tabpanel">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 中国地图 -->
                <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">中国境内客籍人口分布地图</h2>
                    <div id="chinaMap" class="map-container"></div>
                    <div class="mt-4 text-sm text-gray-600">
                        <p><i class="fa fa-circle text-red-500 mr-1"></i> 核心区（1000万+） | 
                        <i class="fa fa-circle text-orange-500 mr-1"></i> 主要区（100万-1000万） | 
                        <i class="fa fa-circle text-yellow-500 mr-1"></i> 次要区（10万-100万） | 
                        <i class="fa fa-circle text-gray-400 mr-1"></i> 方言岛（1万-10万）</p>
                    </div>
                </div>

                <!-- 中国分布数据 -->
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">中国省份分布统计</h2>
                    <canvas id="chinaBarChart" height="280"></canvas>
                    <div class="mt-6">
                        <h3 class="font-semibold text-gray-700 mb-2">境内分布特点</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><i class="fa fa-check-circle text-red-500 mr-2"></i><strong>广东</strong>：2500-3000万，占全国近半数，梅州为文化核心</li>
                            <li><i class="fa fa-check-circle text-red-500 mr-2"></i><strong>江西</strong>：1000-1200万，赣南为第二大聚居区</li>
                            <li><i class="fa fa-check-circle text-red-500 mr-2"></i><strong>福建</strong>：500-600万，闽西土楼为文化标志</li>
                            <li><i class="fa fa-check-circle text-red-500 mr-2"></i><strong>台湾</strong>：约460万，占总人口20%，桃园、新竹为核心</li>
                            <li><i class="fa fa-check-circle text-red-500 mr-2"></i><strong>其他</strong>：四川（300-400万）、广西（500-600万）等形成方言岛</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 中国核心区详情 -->
            <div class="mt-8 bg-white p-4 rounded-lg shadow-md">
                <h2 class="text-xl font-bold mb-4 text-gray-800">中国客家核心区详情</h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">省份</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人口（万）</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">核心分布区</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文化特色</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">代表性遗产</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">广东省</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2500-3000</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">梅州、河源、惠州</td>
                                <td class="px-6 py-4 text-sm text-gray-500">围龙屋、客家山歌、酿豆腐</td>
                                <td class="px-6 py-4 text-sm text-gray-500">梅州围龙屋、河源佗城</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">江西省</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1000-1200</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赣州、瑞金、兴国</td>
                                <td class="px-6 py-4 text-sm text-gray-500">赣南客家话、红色文化融合</td>
                                <td class="px-6 py-4 text-sm text-gray-500">龙南围屋、瑞金革命遗址</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">福建省</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500-600</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">龙岩、永定、长汀</td>
                                <td class="px-6 py-4 text-sm text-gray-500">土楼文化、汀州传统</td>
                                <td class="px-6 py-4 text-sm text-gray-500">永定土楼、长汀古城</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">台湾地区</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">约460</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">桃园、新竹、苗栗</td>
                                <td class="px-6 py-4 text-sm text-gray-500">四县腔/海陆腔、蓝衫文化</td>
                                <td class="px-6 py-4 text-sm text-gray-500">高雄美浓纸伞、屏东六堆</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 亚洲海外分布选项卡 -->
        <div id="asia" class="tab-content" role="tabpanel">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 亚洲地图 -->
                <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">亚洲海外客籍人口分布地图</h2>
                    <div id="asiaMap" class="map-container"></div>
                    <div class="mt-4 text-sm text-gray-600">
                        <p><i class="fa fa-circle text-red-500 mr-1"></i> 超500万 | 
                        <i class="fa fa-circle text-orange-500 mr-1"></i> 100-500万 | 
                        <i class="fa fa-circle text-yellow-500 mr-1"></i> 10-100万 | 
                        <i class="fa fa-circle text-gray-400 mr-1"></i> 1-10万</p>
                    </div>
                </div>

                <!-- 亚洲分布数据 -->
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">亚洲国家分布统计</h2>
                    <canvas id="asiaBarChart" height="280"></canvas>
                    <div class="mt-6">
                        <h3 class="font-semibold text-gray-700 mb-2">亚洲分布特点</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><i class="fa fa-check-circle text-blue-500 mr-2"></i><strong>印度尼西亚</strong>：800-1000万，全球最大海外客群</li>
                            <li><i class="fa fa-check-circle text-blue-500 mr-2"></i><strong>马来西亚</strong>：200-250万，文化保留最完整</li>
                            <li><i class="fa fa-check-circle text-blue-500 mr-2"></i><strong>泰国</strong>：120-150万，锡矿开发历史悠久</li>
                            <li><i class="fa fa-check-circle text-blue-500 mr-2"></i><strong>新加坡</strong>：60-80万，高度融入主流社会</li>
                            <li><i class="fa fa-check-circle text-blue-500 mr-2"></i><strong>其他</strong>：缅甸（30-50万）、越南（15-20万）等</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 亚洲主要国家详情 -->
            <div class="mt-8 bg-white p-4 rounded-lg shadow-md">
                <h2 class="text-xl font-bold mb-4 text-gray-800">亚洲主要国家客籍社群详情</h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">国家</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人口（万）</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">主要城市</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">移民背景</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文化特征</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">印度尼西亚</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">800-1000</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">雅加达、泗水、棉兰</td>
                                <td class="px-6 py-4 text-sm text-gray-500">19世纪下南洋开矿、垦殖</td>
                                <td class="px-6 py-4 text-sm text-gray-500">侨生客家人、语言保留中等</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">马来西亚</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">200-250</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">槟城、怡保、沙登</td>
                                <td class="px-6 py-4 text-sm text-gray-500">殖民时期劳工及商贸移民</td>
                                <td class="px-6 py-4 text-sm text-gray-500">客家街、文化节、擂茶习俗</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">泰国</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120-150</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">曼谷、清迈、普吉</td>
                                <td class="px-6 py-4 text-sm text-gray-500">锡矿开发及商贸网络构建</td>
                                <td class="px-6 py-4 text-sm text-gray-500">客家商会活跃、语言流失较快</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">新加坡</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60-80</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">芽笼、后港</td>
                                <td class="px-6 py-4 text-sm text-gray-500">殖民时期劳工及近代专业移民</td>
                                <td class="px-6 py-4 text-sm text-gray-500">高度融入、语言保留度低</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">缅甸</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30-50</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">仰光、曼德勒、果敢</td>
                                <td class="px-6 py-4 text-sm text-gray-500">清代移民及玉石贸易网络</td>
                                <td class="px-6 py-4 text-sm text-gray-500">部分融入当地、职业集中度高</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 数据统计选项卡 -->
        <div id="stats" class="tab-content" role="tabpanel">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 数据来源对比 -->
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">主要数据来源对比（以印尼为例）</h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据来源</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">统计年份</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人口（万）</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">统计方法</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">偏差方向</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">印尼人口普查</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2010</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">约840</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">自我申报族群</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">低估混血后裔</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国侨办</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2021</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">900-1000</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">侨团登记估算</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">高估文化认同度</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">房学嘉研究</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2018</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">750-850</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">抽样调查</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">抽样误差±5%</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">印尼客属总会</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">约600</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">会员及亲属统计</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">严重低估非活跃群体</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-6">
                        <h3 class="font-semibold text-gray-700 mb-2">统计难点分析</h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li><i class="fa fa-exclamation-circle text-orange-500 mr-2"></i><strong>身份认定冲突</strong>：血统原则与文化认同原则存在差异</li>
                            <li><i class="fa fa-exclamation-circle text-orange-500 mr-2"></i><strong>语言能力差异</strong>：各国客家话使用率差异显著（马来西亚40% vs 美国<10%）</li>
                            <li><i class="fa fa-exclamation-circle text-orange-500 mr-2"></i><strong>混血后裔统计</strong>：东南亚各国对华裔混血儿统计口径不一</li>
                            <li><i class="fa fa-exclamation-circle text-orange-500 mr-2"></i><strong>城市化影响</strong>：城市中"隐性客家人"统计缺失</li>
                        </ul>
                    </div>
                </div>

                <!-- 客籍人口变迁趋势 -->
                <div class="bg-white p-4 rounded-lg shadow-md">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">客籍人口迁移历史阶段</h2>
                    <div class="relative pl-8 border-l-2 border-amber-500 space-y-6">
                        <!-- 阶段1 -->
                        <div class="relative">
                            <div class="absolute -left-[30px] w-4 h-4 rounded-full bg-amber-500"></div>
                            <h3 class="text-lg font-semibold text-gray-800">明清时期（1368-1912）</h3>
                            <p class="text-sm text-gray-600 mt-1">形成国内基本分布格局，"湖广填四川"等移民运动促使客家人向西南、华南扩散，奠定粤赣闽核心区基础</p>
                            <div class="mt-2 text-xs text-gray-500">代表事件：明末清初客家先民西迁四川、赣南客家聚居区形成</div>
                        </div>
                        <!-- 阶段2 -->
                        <div class="relative">
                            <div class="absolute -left-[30px] w-4 h-4 rounded-full bg-amber-500"></div>
                            <h3 class="text-lg font-semibold text-gray-800">19世纪（契约华工时期）</h3>
                            <p class="text-sm text-gray-600 mt-1">大规模海外迁移，主要流向东南亚（印尼、马来西亚）、美洲（美国、秘鲁），参与采矿、垦殖、铁路建设</p>
                            <div class="mt-2 text-xs text-gray-500">代表事件：下南洋浪潮、美国太平洋铁路建设、秘鲁鸟粪开采</div>
                        </div>
                        <!-- 阶段3 -->
                        <div class="relative">
                            <div class="absolute -left-[30px] w-4 h-4 rounded-full bg-amber-500"></div>
                            <h3 class="text-lg font-semibold text-gray-800">20世纪后期（再移民潮）</h3>
                            <p class="text-sm text-gray-600 mt-1">东南亚客家人向欧美再迁移，台湾客家人文化复兴，中国内地城市化导致客家人口向城市流动</p>
                            <div class="mt-2 text-xs text-gray-500">代表事件：台湾客家电视台成立、东南亚客家移民欧美、深圳客家人口增长</div>
                        </div>
                        <!-- 阶段4 -->
                        <div class="relative">
                            <div class="absolute -left-[30px] w-4 h-4 rounded-full bg-amber-500"></div>
                            <h3 class="text-lg font-semibold text-gray-800">21世纪（全球化时代）</h3>
                            <p class="text-sm text-gray-600 mt-1">高端人才跨国流动增加，海外客家人回流创业，数字媒体促进客家文化全球传播</p>
                            <div class="mt-2 text-xs text-gray-500">代表事件：世界客家恳亲大会、客家文化数字化保护、客家商会全球网络构建</div>
                        </div>
                    </div>

                    <div class="mt-8">
                        <h3 class="font-semibold text-gray-700 mb-3">未来研究方向</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
                                <i class="fa fa-lightbulb-o text-amber-500 mr-2"></i>跨学科方法创新（基因地理、GIS）
                            </div>
                            <div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
                                <i class="fa fa-lightbulb-o text-amber-500 mr-2"></i>城市客家社群专题研究
                            </div>
                            <div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
                                <i class="fa fa-lightbulb-o text-amber-500 mr-2"></i>混血客家人身份认同研究
                            </div>
                            <div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
                                <i class="fa fa-lightbulb-o text-amber-500 mr-2"></i>客家方言数字化保护政策
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12 py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold flex items-center">
                        <i class="fa fa-globe mr-2"></i>全球客籍人口分布可视化
                    </h3>
                    <p class="text-gray-400 text-sm mt-1">基于多源学术数据的客籍人口地理研究平台</p>
                </div>
                <div class="text-gray-400 text-sm">
                    <p>数据来源：学术研究、侨务报告、民间调查 | 统计截止：2024年5月</p>
                    <p class="mt-1">© 2024 客籍人口研究中心 | 可视化平台V1.0</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 选项卡切换功能
        document.querySelectorAll('#tabGroup button').forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有活跃状态
                document.querySelectorAll('#tabGroup button').forEach(btn => {
                    btn.classList.remove('border-amber-500', 'text-amber-600');
                    btn.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                    btn.setAttribute('aria-selected', 'false');
                });
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });

                // 添加当前活跃状态
                button.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                button.classList.add('border-amber-500', 'text-amber-600');
                button.setAttribute('aria-selected', 'true');
                const targetId = button.getAttribute('data-tabs-target');
                document.querySelector(targetId).classList.add('active');
                
                // 切换选项卡后刷新地图大小，解决微信浏览器中的显示问题
                setTimeout(() => {
                    if (globalMap) globalMap.invalidateSize();
                    if (chinaMap) chinaMap.invalidateSize();
                    if (asiaMap) asiaMap.invalidateSize();
                }, 100);
            });
        });

        // 初始化全球地图 - 使用高德地图瓦片服务
        const globalMap = L.map('globalMap').setView([20, 0], 2);
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234",
            attribution: '© 高德地图'
        }).addTo(globalMap);

        // 全球客籍分布数据
        const globalData = [
            {name: "中国广东", lat: 23.12, lng: 113.23, population: 2800, type: 0},
            {name: "中国江西", lat: 27.87, lng: 115.83, population: 1100, type: 0},
            {name: "中国福建", lat: 26.08, lng: 119.30, population: 550, type: 1},
            {name: "中国台湾", lat: 23.52, lng: 121.00, population: 460, type: 1},
            {name: "印尼", lat: -6.20, lng: 106.84, population: 900, type: 0},
            {name: "马来西亚", lat: 3.14, lng: 101.69, population: 220, type: 1},
            {name: "泰国", lat: 13.75, lng: 100.50, population: 130, type: 1},
            {name: "新加坡", lat: 1.35, lng: 103.82, population: 70, type: 2},
            {name: "美国", lat: 37.09, lng: -95.71, population: 60, type: 1},
            {name: "秘鲁", lat: -9.19, lng: -75.01, population: 10, type: 2},
            {name: "英国", lat: 55.37, lng: -3.43, population: 15, type: 2},
            {name: "毛里求斯", lat: -20.34, lng: 57.52, population: 4, type: 2},
            {name: "澳大利亚", lat: -25.27, lng: 133.77, population: 8, type: 2},
            {name: "南非", lat: -30.56, lng: 22.94, population: 1.5, type: 3}
        ];

        // 地图标记样式
        const iconStyles = [
            L.divIcon({className: 'custom-icon', html: '<div style="background:#ef4444;width:16px;height:16px;border-radius:50%;border:2px solid white;"></div>', iconSize: [16, 16]}),
            L.divIcon({className: 'custom-icon', html: '<div style="background:#f97316;width:14px;height:14px;border-radius:50%;border:2px solid white;"></div>', iconSize: [14, 14]}),
            L.divIcon({className: 'custom-icon', html: '<div style="background:#fbbf24;width:12px;height:12px;border-radius:50%;border:2px solid white;"></div>', iconSize: [12, 12]}),
            L.divIcon({className: 'custom-icon', html: '<div style="background:#9ca3af;width:10px;height:10px;border-radius:50%;border:2px solid white;"></div>', iconSize: [10, 10]})
        ];

        // 添加地图标记
        globalData.forEach(item => {
            const marker = L.marker([item.lat, item.lng], {icon: iconStyles[item.type]}).addTo(globalMap);
            marker.bindPopup(`
                <b>${item.name}</b><br>
                客籍人口：${item.population}万<br>
                占全球客籍比例：${(item.population/9000*100).toFixed(1)}%
            `);
        });

        // 初始化中国地图 - 使用高德地图瓦片服务
        const chinaMap = L.map('chinaMap').setView([27.5, 110.5], 4);
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234",
            attribution: '© 高德地图'
        }).addTo(chinaMap);

        // 中国客籍分布数据
        const chinaData = [
            {name: "广东梅州", lat: 24.31, lng: 116.10, population: 500, type: 0},
            {name: "广东河源", lat: 23.74, lng: 114.65, population: 350, type: 0},
            {name: "江西赣州", lat: 25.84, lng: 114.93, population: 850, type: 0},
            {name: "福建龙岩", lat: 25.07, lng: 117.01, population: 300, type: 1},
            {name: "台湾桃园", lat: 25.01, lng: 121.31, population: 120, type: 1},
            {name: "四川成都", lat: 30.67, lng: 104.06, population: 150, type: 2},
            {name: "广西玉林", lat: 22.63, lng: 110.15, population: 200, type: 2},
            {name: "海南儋州", lat: 19.52, lng: 109.18, population: 60, type: 2},
            {name: "湖南浏阳", lat: 28.16, lng: 113.63, population: 80, type: 3},
            {name: "陕西商洛", lat: 33.87, lng: 109.93, population: 30, type: 3}
        ];

        // 添加中国地图标记
        chinaData.forEach(item => {
            const marker = L.marker([item.lat, item.lng], {icon: iconStyles[item.type]}).addTo(chinaMap);
            marker.bindPopup(`
                <b>${item.name}</b><br>
                客籍人口：${item.population}万<br>
                占本省客籍比例：${item.name.includes('广东') ? '30%+' : item.name.includes('江西') ? '80%+' : '20%-50%'}
            `);
        });

        // 初始化亚洲地图 - 使用高德地图瓦片服务
        const asiaMap = L.map('asiaMap').setView([15, 100], 3);
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234",
            attribution: '© 高德地图'
        }).addTo(asiaMap);

        // 亚洲客籍分布数据
        const asiaData = [
            {name: "印尼雅加达", lat: -6.20, lng: 106.84, population: 200, type: 0},
            {name: "印尼泗水", lat: -7.25, lng: 112.75, population: 150, type: 1},
            {name: "马来西亚槟城", lat: 5.41, lng: 100.34, population: 80, type: 1},
            {name: "马来西亚怡保", lat: 4.59, lng: 101.09, population: 50, type: 2},
            {name: "泰国曼谷", lat: 13.75, lng: 100.50, population: 60, type: 1},
            {name: "泰国普吉", lat: 8.15, lng: 98.43, population: 20, type: 2},
            {name: "新加坡", lat: 1.35, lng: 103.82, population: 70, type: 1},
            {name: "缅甸仰光", lat: 16.79, lng: 96.17, population: 25, type: 2},
            {name: "缅甸果敢", lat: 24.48, lng: 98.78, population: 15, type: 3},
            {name: "越南胡志明市", lat: 10.77, lng: 106.70, population: 12, type: 3}
        ];

        // 添加亚洲地图标记
        asiaData.forEach(item => {
            const marker = L.marker([item.lat, item.lng], {icon: iconStyles[item.type]}).addTo(asiaMap);
            marker.bindPopup(`
                <b>${item.name}</b><br>
                客籍人口：${item.population}万<br>
                占该国客籍比例：${item.name.includes('印尼') ? '30%+' : item.name.includes('马来西亚') ? '40%+' : '50%-70%'}
            `);
        });

        // 全球分布饼图
        const globalPieCtx = document.getElementById('globalPieChart').getContext('2d');
        new Chart(globalPieCtx, {
            type: 'pie',
            data: {
                labels: ['中国境内', '东南亚', '美洲', '欧洲', '非洲', '大洋洲'],
                datasets: [{
                    label: '客籍人口占比',
                    data: [65, 20, 5, 3, 4, 3],
                    backgroundColor: [
                        '#ef4444', '#f97316', '#fbbf24', '#84cc16', '#22c55e', '#10b981'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 11
                            },
                            padding: 15
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${percentage}% (约${(value/100*9000).toFixed(0)}万)`;
                            }
                        }
                    }
                }
            }
        });

        // 中国分布柱状图
        const chinaBarCtx = document.getElementById('chinaBarChart').getContext('2d');
        new Chart(chinaBarCtx, {
            type: 'bar',
            data: {
                labels: ['广东', '江西', '福建', '台湾', '四川', '广西', '海南', '湖南', '陕西'],
                datasets: [{
                    label: '客籍人口（万）',
                    data: [2800, 1100, 550, 460, 350, 550, 150, 200, 50],
                    backgroundColor: '#ef4444',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw || 0;
                                const percentage = Math.round((value / 7000) * 100);
                                return `人口：${value}万 (占全国${percentage}%)`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 11
                            }
                        }
                    }
                }
            }
        });

        // 亚洲分布柱状图
        const asiaBarCtx = document.getElementById('asiaBarChart').getContext('2d');
        new Chart(asiaBarCtx, {
            type: 'bar',
            data: {
                labels: ['印尼', '马来西亚', '泰国', '新加坡', '缅甸', '越南', '菲律宾', '日本', '韩国'],
                datasets: [{
                    label: '客籍人口（万）',
                    data: [900, 220, 130, 70, 40, 18, 25, 4, 2],
                    backgroundColor: '#3b82f6',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw || 0;
                                const percentage = Math.round((value / 1500) * 100);
                                return `人口：${value}万 (占亚洲海外${percentage}%)`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 11
                            }
                        }
                    }
                }
            }
        });

        // 窗口大小变化时重置地图大小
        window.addEventListener('resize', () => {
            if (globalMap) globalMap.invalidateSize();
            if (chinaMap) chinaMap.invalidateSize();
            if (asiaMap) asiaMap.invalidateSize();
        });

        // 微信浏览器兼容性处理
        document.addEventListener('WeixinJSBridgeReady', function() {
            if (globalMap) globalMap.invalidateSize();
            if (chinaMap) chinaMap.invalidateSize();
            if (asiaMap) asiaMap.invalidateSize();
        }, false);
    </script>
</body>
</html>
